<#assign contextPath=springMacroRequestContext.getContextPath() />
<#import "/public/frame/main.html" as frame />
<@frame.head "南航明珠商城-调查问卷新增">
</@frame.head>
<head>
	   <style type="text/css">
	   		.question_type{
	   			background-color: #d9d9d9;
	   			height:100%;
	   			padding-left:20px;
	   			padding-top:5px;
	   			font-weight:bold;
	   		}
	   		
	   		td{
	   		  height:30px;
	   		}
	   		
	   		.deleteOptionQuestion{
	   			margin-left:400px;
	   			color:blue;
	   			margin-top:60px;
	   		}
	   		
	   		.deleteTextQuestion{
	   			color:blue;
	   			margin-left:220px;
	   		}
	   		
	   		.addOption{
	   			color:blue;
	   			margin-left:80px;
	   		}
	   		
	   		.optionQuestionTr td ul{ 
	   			list-style:none; 
	   			line-height: 32px;
	   			height: 32px;
	   		}
	   		
			.optionQuestionTr td ul li{ 
			    display:block;
			    float:left;
			    padding-right:20px;
			}
			
			.optionQuestionTr td ul li span{ 
			    margin-left:80px;
			}
			
			a{
			 cursor: pointer;
			}
	   		
	   </style>
</head>
<body>
       <div id="wrapper" class="w970" class="wrapper22">
            <div id="container_wrap">
				<div id="container">
					
                     <div id="main_content" class="fl">

						<div class="order">
						<form  action="${contextPath}/questionnaire/edit"  method="post"  id="createForm">
						 
						 <input type="hidden" name="id" value="${questionnaire.id}"/>
						 <div class="filter">
                           <ul class="admin_tab"> </ul>
						   <div class="admin_tab_content" id="release">
                            <table class="tab_iframe" border="0" width="100%"   style="table-layout:fixed;">
                             <tr>
                               <td width="90px"><font style="color:red;">*</font>问卷名称：</td> 
                               <td> <input class="input-text  radius" type="text" size="30" maxlength="50"  name="name" value="${questionnaire.name}"/></td>
                            </tr>
                            
                            <tr>
                              	<td width="90px"><font style="color:red;">*</font>开始时间：</td> 
                              	<td>                              	<input  type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'endDate\')}',readOnly: true })" id="startDate" 
               value='${questionnaire.startDate?date}' name="startDate"  class="input-text Wdate" style="width:120px;">
               </td>
                            </tr>
                            
                             <tr>
                              	<td width="90px""><font style="color:red;">*</font>结束时间：</td> 
                              	<td> <input  type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'startDate\')}',readOnly: true })" id="endDate" 
               value='${questionnaire.endDate?date}' name="endDate"    class="input-text Wdate" style="width:120px;">
               </td>
                            </tr>
                            
                             <tr>
                               <td><font style="color:red;">*</font>参与条件：</td>
                               <td><input type="radio" name="needLogin" value="2" <#if questionnaire.needLogin == 2>checked</#if>/>免登录</td>
                               <td><input type="radio" name="needLogin" value="1" <#if questionnaire.needLogin == 1>checked</#if>/>已登录</td>
                            </tr>
                            
                            <!-- ----------------------------------------------------------- -->
                            <tr id="questionNum" questionNum="${questionnaire.questionList?size}">
                            	<td colspan="3">
                            		<div class="question_type">选择题</div>
                            	</td>
                            </tr> 
                            
                            <#list  questionnaire.questionList as question  >
                            	<#if question.type != 3>
                            		<tr class="optionQuestionTr" optionIndex="${question.optionMap?size-1}" questionIndex="${question_index}">
                            			  <input type="hidden" name="questionList[${question_index}].id" value="${question.id}"/>
										  <td colspan="3">
											<ul>
											  <li><font style="color:red;">*</font>题目名称:</li>
											  <li><input type="text" size="80" maxlength="80" name="questionList[${question_index}].name" value="${question.name}"/></li>
											  <li><input type="checkbox" name="questionList[${question_index}].type"  value="2"
											  	  <#if question.type == 2>checked</#if> />可多选
											 </li>
											</ul>
											<#if question.optionMap?exists>
								                <#list question.optionMap?keys as key> 
								                  <ul>
												  <#if key=='A'>
												  	<li><font style="color:red;">*</font>备选答案:</li>
												  	<li>${key}:<input type="text" size="30" maxlength="50" value="${question.optionMap[key]}"
												  		name="questionList[${question_index}].optionMap['${key}']"/></li>
												  <#else>
												   <li><span>${key}</span>:<input type="text" size="30" maxlength="50" value="${question.optionMap[key]}"
												  		name="questionList[${question_index}].optionMap['${key}']"/></li>
												 </#if>
												 
												</ul>
								                </#list>
								            </#if>
											
											<ul>
											  <li><a class="addOption">添加备选答案</a></li>
											  <li><a class="deleteOptionQuestion">删除选择题</a></li>
											</ul>
										  </td>
										</tr>
                            	</#if>
                            </#list>
                            <tr>
	                             <td height="60px"><input class="btn btn-success radius" type="button" id="addOptionQuestion" value="添加选择题"/></td>
                            </tr>
                            
                            <!-- ----------------------------------------------------------- -->
                             <tr>
                            	<td colspan="3">
                            		<div class="question_type">填空题</div>
                            	</td>
                            </tr> 
                            <#list questionnaire.questionList as question>
                            	<#if question.type == 3>
                            		<tr>
                            		    <input type="hidden" name="questionList[${question_index}].id" value="${question.id}"/>
										<input type="hidden" name="questionList[${question_index}].type" value="3"/>
										<td><font style="color:red;">*</font>题目名称:</td>
										<td>
											 <input type="text" size="80" maxlength="80" class="textQuestion" name="questionList[${question_index}].name"
											 value="${question.name}"/>
										</td>
										<td><a class='deleteTextQuestion'>删除填空题</a></td>
									</tr>
                            	</#if>
                            </#list>

                            <tr>
	                            <td height="60px"><input type="button" class="btn btn-success radius" id="addTextQuestion" value="添加填空题" onclick=""/></td>
                            </tr>
                            <!-- ----------------------------------------------------------- -->
                            
                            <td>
                              <br/>
                            </td>
                            
                            <tr>
                            	<td><input type="button" class="btn btn-success radius" value="修改问卷" onclick="editQuestionnaire();" name="update"/></td>
							    <td>
							    <input type="button" class="btn btn-success radius" value="取消" onclick="cancle();" name="cancleBtn"/> 
							   </td>
                            </tr>
                            
                          </table>	
				
							
						
				 		</div>		
						</div>	
	 				</form>
	 				<iframe name="hidden_frame" style="display:none;"></iframe>		
	  				</div>			
				  </div>
			</div>
   		</div>
	</body>
<@frame.end "default">
</@frame.end>
<script type="text/javascript" src="${contextPath}/resources/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="${contextPath}/resources/js/laypage/laypage.js"></script>
<script type="text/javascript" src="${contextPath}/resources/js/brand/query_brand.js"></script>
	<script type="text/javascript">
	var path="${contextPath}";
	
		//添加备选答案
		$('body').on("click",'.addOption',function(){
			var optionIndexArr = new Array('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
			var tr = $(this).parent("li").parent("ul").parent("td").parent("tr");
			var optionIndex = tr.attr("optionIndex"); 
			var questionIndex = tr.attr("questionIndex"); 
			var currentOptionIndex = Number(optionIndex) + 1;
			if(Number(currentOptionIndex) >= 26){
				alert("备选答案不能超过26个");
				return false;
			}
			var optionHtml = "<ul><li><span>" + optionIndexArr[Number(currentOptionIndex)] +
					":</span><input type='text' size='30' maxlength='50' name=\"questionList[" + questionIndex + "].optionMap['" + optionIndexArr[Number(currentOptionIndex)] +"']\"/></li></ul>";
			var currentUL = $(this).parent("li").parent("ul");
			currentUL.before(optionHtml);
			tr.attr("optionIndex",Number(optionIndex)+1);
		});
		
		
		//添加选择题
		$("#addOptionQuestion").click(function(){
			var questionNum = Number($("#questionNum").attr("questionNum"));
			
			var optionQuestionHtml = "<tr class='optionQuestionTr' optionIndex='0' questionIndex='" + questionNum +"'><td colspan='3'>"
            						 + "<ul><li><font style='color:red;'>*</font>题目名称:</li><li><input type='text' size='80' maxlength='80' name='questionList[" + questionNum + "].name' /></li>"
              						 + "<li><input type='checkbox' name='questionList[" + questionNum + "].type' value='2'/>可多选</li></ul>"
              						 + "<ul><li><font style='color:red;'>*</font>备选答案:</li><li>A:<input type='text' size='30' maxlength='50' name=\"questionList[" + questionNum + "].optionMap['A']\"/></li></ul>"
              						+ "<ul><li><a class='addOption'>添加备选答案</a></li><li><a class='deleteOptionQuestion'>删除选择题</a></li></ul>"
            + "</td></tr>";
            var tr = $("#addOptionQuestion").parent("td").parent("tr");
            tr.before(optionQuestionHtml);
            $("#questionNum").attr("questionNum",questionNum + 1);
		});
		
		//删除选择题
		$('body').on("click",'.deleteOptionQuestion',function(){
			if(confirm("确定删除选择题吗")){
				$(this).parent("li").parent("ul").parent("td").parent("tr").remove();
			}
		});
		
		//添加填空题
		$("#addTextQuestion").click(function(){
			var questionNum = Number($("#questionNum").attr("questionNum"));
			var textQuestionHtml = "<tr><input type='hidden' name='questionList[" + questionNum + "].type' value='3'/>"
            					 + "<td><font style='color:red;'>*</font>题目名称:</td>"
								 + "<td><input type='text' size='80' maxlength='80' class='textQuestion' name='questionList[" + questionNum + "].name'/></td>"
            					 + "<td><a class='deleteTextQuestion'>删除填空题</a></td></tr>";
       		var tr = $("#addTextQuestion").parent("td").parent("tr");
       		tr.before(textQuestionHtml);
			$("#questionNum").attr("questionNum",questionNum + 1);
		});
		
		//删除填空题
		$('body').on("click",'.deleteTextQuestion',function(){
			if(confirm("确定删除填空题吗")){
				$(this).parent("td").parent("tr").remove();
			}
		});
		
		//js去掉空格
	     function trim(str){ 
			if(str==undefined){
				return "";
			}else{
				return  str.replace(/^\s+|\s+$/g,"");
			}
			
		 }
		
		//修改调查问卷
		function editQuestionnaire(){
			
		   //js校验
		   var questionnaireName = $("input[name='name']").val();
		   questionnaireName = trim(questionnaireName);
		   if(questionnaireName == null || questionnaireName == ""){
			   alert("请填写问卷名称");
			   return false;
		   }
		   var startDate = $("input[name='startDate']").val();
		   startDate = trim(startDate);
		   if(startDate == null || startDate == ""){
			   alert("请填写开始时间");
			   return false;
		   }
		   var endDate = $("input[name='endDate']").val();
		   endDate = trim(endDate);
		   if(endDate == null || endDate == ""){
			   alert("请填写结束时间");
			   return false;
		   }
		   
		   var optionQuestionLength = $(".optionQuestionTr").length;
		   var textQuestionLength = $(".deleteTextQuestion").length;
		   if(optionQuestionLength == 0 && textQuestionLength==0){
			   alert("请添加题目");
			   return false;
		   }
		   
		   var optionReturn = false;
		   $(".optionQuestionTr  input").each(function(){
			   var inputText = $(this).val();
			   inputText = trim(inputText);
			   if(inputText == "" || inputText == null){
				   alert("选择题信息请输入完整");
				   optionReturn = true;
				   return false;
			   }
		   });
		   if(optionReturn){
			   return false;
		   }
		   
		   var textReturn = false;
		   $(".textQuestion").each(function(){
			   var inputText = $(this).val();
			   inputText = trim(inputText);
			   if(inputText == "" || inputText == null){
				   alert("填空题信息请输入完整");
				   textReturn = true;
				   return false;
			   }
		   });
		   if(textReturn){
			   return false;
		   }
		   

			$("#createForm").ajaxSubmit({
				dataType : 'html',
		        success: function(message){
			   		  var resultArr = message.split(",");
			   		  if(resultArr[0] == "success"){
		                    layer.msg('操作成功!',{icon:1,time:1000},function(){
		                    	                        parent.window.location.reload();

		                    	                    });
			   		  }else{
			   			layer.alert(resultArr[1]);
			   		  }

		        },
		        error: function(){
		            layer.msg('操作失败!',{icon:5,time:1000});
		        }
		    });
		}
		
		function cancle(){
			 parent.window.location.reload();
		}
		
	</script>
</html>